<template>
  <div class="hry-login-wrapper">
    <div class="pc-circle-backgroud">
      <div class="login-main">
        <img
          src="@/assets/imgAdmin/text.png"
          alt=""
          style="width: 70%;margin-bottom: 50px"
        />
        <a-form
          class="ant-advanced-search-form"
          :form="form"
          @submit="handleSubmit"
        >
          <a-form-item v-bind="formItemLayout">
            <a-input
              size="large"
              v-decorator="[
                'username',
                { rules: [{ required: true, message: '必选项' }] }
              ]"
            >
              <a-icon
                slot="prefix"
                type="smile"
                theme="filled"
                class="iconfont"
              />
            </a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout">
            <a-input
              size="large"
              type="password"
              v-decorator="[
                'password',
                { rules: [{ required: true, message: '必选项' }] }
              ]"
            >
              <a-icon
                slot="prefix"
                type="lock"
                theme="filled"
                class="iconfont"
              />
            </a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout">
            <a-row>
              <a-col :span="12">
                <a-input
                  size="large"
                  style="width:100%"
                  v-decorator="[
                    'code',
                    { rules: [{ required: true, message: '必选项' }] }
                  ]"
                >
                  <a-icon
                    slot="prefix"
                    type="safety-certificate"
                    theme="filled"
                    class="iconfont"
                  />
                </a-input>
              </a-col>
              <a-col :span="4"></a-col>
              <a-col :span="8">
                <img :src="imgSrc" id="code" alt="captcha" @click="clickCode" />
              </a-col>
            </a-row>
          </a-form-item>
          <a-row>
            <a-col :span="24" :style="{ textAlign: 'center' }">
              <a-button
                block
                class="loginBtn"
                size="large"
                type="primary"
                html-type="submit"
              >
                登录
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 0 },
          sm: { span: 0 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        }
      },
      imgSrc: ""
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          this.$ajax
            .post(this.$api.login, values)
            .then(res => {
              this.$notification.success({
                message: "登录成功！"
              });
              localStorage.setItem("token", this.$crypto.setAES(res.token));
              localStorage.setItem("id", res.id);
              this.$store.dispatch("changeLoginState", true);
              this.$store.dispatch("changeName", res.username);
              this.$router.push({ name: "leadingEndBanner" });
            })
            .catch(err => {
              this.getCode();
              this.$notification.error({
                message: err
              });
            });
        } else {
          return false;
        }
      });
    },
    clickCode() {
      this.getCode();
    },
    getCode() {
      this.$ajax
        .post(this.$api.getCode, false)
        .then(res => {
          this.imgSrc = res;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getCode();
  }
};
</script>

<style scoped lang="less">
.hry-login-wrapper {
  width: 100%;
  height: 100%;
  background: url("@{images}/imgAdmin/loginBgd.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-circle-backgroud {
  width: 61%;
  height: 77%;
  background: url("@{images}/imgAdmin/boxbg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-circle-backgroud .loginBtn {
  background-color: #3d58b5;
  margin-top: 48px;
  border: 1px solid #3d58b5;
}
.login-main {
  text-align: center;
  font-size: 30px;
  color: #001529;
  font-family: Microsoft YaHei;
  font-weight: 400;
  width: 65%;
}
.login-main > p:first-child {
  margin-bottom: 62px;
}

.mobile-circle-backgroud .login-main {
  width: 90%;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  background-color: rgba(255, 255, 255, 0.84);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-circle-backgroud .loginBtn {
  background-color: #001529;
  margin-top: 20px;
}
.mobile-circle-backgroud .login-main {
  font-size: 26px;
}
.ant-advanced-search-form {
  width: 52%;
  margin: 0 auto;
}

#code {
  display: block;
  width: 119px;
  border-radius: 5px;
  height: 42px;
}
.iconfont {
  color: #242064;
  font-size: 26px;
}
</style>
